<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="600" height="400">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>
   <video src="../video/apink.mp4" controls style="width: 800px;height: 450px;" hidden></video>
   <button id="btn">播放或者暂停</button>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')

      // 获取设置视频对象
      // const video = document.createElement("video")
      // video.src = '../video/apink.mp4'

      const video = document.querySelector("video")
      const img = new Image()
      img.src = '../imgs/zjy1.png'
      // 获取按钮
      const btn = document.querySelector("#btn")
      btn.onclick = function () {
         if (video.paused) {
            video.play()
            render()
         } else {
            video.pause()
         }
      }
      function render() {
         ctx.drawImage(video, 0, 0, 600, 350)
         ctx.drawImage(img, 470, 250, 150, 100)
         requestAnimationFrame(render)
      }
   </script>
</body>

</html>